<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>后台管理 - 易买网</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css"/>
    <script type="text/javascript" src="../scripts/function-manage.js"></script>
  </head>
  <body>
    <div id="header" class="wrap">
      <div id="logo"><img src="../images/logo.gif"/></div>
      <div class="help"><a href="../index.html">返回前台页面</a></div>
      <div class="navbar">
        <ul class="clearfix">
          <li><a href="index.html">首页</a></li>
          <li><a href="user.html">用户</a></li>
          <li class="current"><a href="product.html">商品</a></li>
          <li><a href="order.html">订单</a></li>
          <li><a href="guestbook.html">留言</a></li>
          <li><a href="news.html">新闻</a></li>
        </ul>
      </div>
    </div>
    <div id="childNav">
      <div class="welcome wrap">
        管理员pillys您好，今天是2012-12-21，欢迎回到管理后台。
      </div>
    </div>
    <div id="position" class="wrap">
      您现在的位置：<a href="index.html">易买网</a> &gt; 管理后台
    </div>
    <div id="main" class="wrap">
      <div id="menu-mng" class="lefter">
        <div class="box">
          <dl>
            <dt>用户管理</dt>
            <dd><em><a href="user-add.html">新增</a></em><a href="user.html">用户管理</a></dd>
            <dt>商品信息</dt>
            <dd><em><a href="productClass-add.html">新增</a></em><a
                href="productClass.html">分类管理</a>
            </dd>
            <dd><em><a href="product-add.html">新增</a></em><a
                href="product.html">商品管理</a></dd>
            <dt>订单管理</dt>
            <dd><a href="order.html">订单管理</a></dd>
            <dt>留言管理</dt>
            <dd><a href="guestbook.html">留言管理</a></dd>
            <dt>新闻管理</dt>
            <dd><em><a href="news-add.html">新增</a></em><a href="news.html">新闻管理</a></dd>
          </dl>
        </div>
      </div>
      <div class="main">
        <h2>添加商品</h2>
        <div class="manage">
          <form action="../productAdminAddServlet" enctype="multipart/form-data"
                method="post">
            <input type="hidden" name="epId" id="epId">
            <table class="form">
              <tr>
                <td class="field">商品名称：</td>
                <td><input type="text" class="text" name="epName" id="epName"
                           value=""/></td>
              </tr>
              <tr>
                <td class="field">所属分类：</td>
                <td>
                  <select name="parentId" id="epcId">
                    <option value="1">电器</option>
                    <option value="3">├ 电器</option>
                    <option value="3">└ 电器</option>
                    <option value="2">衣服</option>
                    <option value="3">├ 电器</option>
                    <option value="3">└ 电器</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="field">原来的图片：</td>
                <td>
                  <img src="" alt="" id="epFileName">
                </td>
              </tr>
              <tr>
                <td class="field">更改图片：</td>
                <td>
                  <input type="file" id="fileUpLoad" class="text" name="photo"/>
                </td>
              </tr>
              <tr>
                <td class="field">商品价格：</td>
                <td><input type="text" class="text tiny" id="epPrice"
                           name="productPrice"/> 元
                </td>
              </tr>
              <tr>
                <td class="field">库存：</td>
                <td><input type="text" class="text tiny" id="epStock"
                           name="epStock"/></td>
              </tr>
              <tr>
                <td class="field">描述：</td>
                <td><input type="text" class="text" id="epDescription"
                           name="epDescription"/></td>
              </tr>
              <tr>
                <td></td>
                <td><label class="ui-blue"><input type="submit" id="sub"
                                                  name="submit" value="添加"/></label>
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div id="footer">
      Copyright &copy; 2010 北大青鸟 All Rights Reserved. 京ICP证1000001号
    </div>

    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

      // 原理是把本地图片路径："D(盘符):/image/..."转为"http://..."格式路径来进行显示图片
      $("#fileUpLoad").change(function () {
        let $file = $(this);
        let objUrl = $file[0].files[0];
        //获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
        let windowURL = window.URL || window.webkitURL;
        //createObjectURL创建一个指向该参数对象(图片)的URL
        let dataURL;
        dataURL = windowURL.createObjectURL(objUrl);
        //把url给图片的src，让其显示
        $("#epFileName").attr("src", dataURL);
        $('#epFileName').attr("style", "display:inline");
        $('#epFileName').attr("height", "100px");
      });

    </script>
    <script type="text/javascript" src="../js/getParameter.js"></script>

    <script type="text/javascript">
      function showProduct() {
        let epId = getParameter("epId");
        $.ajax({
          url: '../productAdminProductTailServlet',
          data: {epId: epId},
          type: 'post',
          dataType: 'json',
          success: function (data) {
            console.log(data);
            $('#epId').val(data.epId);
            $('td:hidden').show();
            $('#epName').val(data.epName);
            $('#epFileName').attr('src', '../' + data.epFileName);
            $('#epPrice').val(data.epPrice);
            $('#epStock').val(data.epStock);
            $('#epDescription').val(data.epDescription);
            findAllCategory(data.epcId, data.epcChildId);
          }
        });
      };

      /**
       * 查询所有分类信息
       * @param epcId
       * @param epcChildId
       */
      function findAllCategory(epcId, epcChildId) {
        $.ajax({
          url: '../productCategoryAdminGetAllServlet',
          dataType: 'json',
          type: 'post',
          success: function (data) {
            console.log(showCategory(data, '', 0, epcId, epcChildId));
            $('#epcId').html(showCategory(data, '', 0, epcId, epcChildId));
          }
        });
      }

      // 展示下拉列表中所有内容，并选中该商品所属的分类
      function showCategory(list, str, leave, epcId, epcChildId) {
        for (let i = 0; i < list.length; i++) {
          if (epcChildId == 'null') {
            if (epcId == list[i].epcId) {
              str += '<option value="' + list[i].epcId + ' selected">';
            } else {
              str += '<option value="' + list[i].epcId + '">';
            }
          } else {
            if (epcChildId == list[i].epcId) {
              str += '<option value="' + list[i].epcId + '" selected>';
            } else {
              str += '<option value="' + list[i].epcId + '">';
            }
          }
          for (let j = 0; j < leave - 1; j++) {
            str += ' ';
          }
          for (let k = 0; k < leave; k++) {
            if (i < list.length - 1) {
              str += '├ ';
            } else {
              str += '└ ';
            }
          }
          str += list[i].epcName + '</option>';
          if (list[i].sonCategoryList != 'null') {
            str = showCategory(list[i].sonCategoryList, str, leave + 1, epcId, epcChildId);
          }
        }
        return str;
      }

      $(function () {
        showProduct();

        if (getParameter("result")) {
          alert("修改成功");
        } else {
          alert("修改失败");
        }
      });
    </script>
  </body>
</html>